<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            /* 
          vw: 视图窗口宽度的计算值 100vw === 视图窗口宽度100%

          vh：视图窗口高度的计算值 100vh === 视图窗口高度100%
            */
            height: 100vh;
        }

        .box>img {
            position: absolute;
            z-index: 100;
            left: calc(50% - 25px);
            top: calc(100% - 62px);
        }

        .zidan {
            position: absolute;
            top: calc(100% -62px);
            left: calc(50% -25px);
            width: 10px;
            height: 40px;
            border-top: 1px solid #f00;
            background-image: linear-gradient(rgb(255, 47, 0), rgb(255, 221, 0), rgba(255, 0, 0, 0), rgba(255, 0, 0, 0));
            border-top-left-radius: 100%;
            border-top-right-radius: 100%;
            transition: top 0s linear;
        }
    </style>
</head>

<body>
    <div class="box">
        <img src="./img/bd.png" alt="">
    </div>
    <script>
        // 当按下上下左右键盘 设置img得移动
        // 按下空格键 创建span标签  设置span标签从飞机头到页面上方的动画  再删除


        var img = document.querySelector(".box>img");
        var box = document.querySelector(".box");
        // 1. 添加事件

        function aaa(e) {

            // 3. 判断如果按下的不是37-40的值  直接结束函数运行
            if (e.keyCode < 37 || e.keyCode > 40) return;
            //  4. 获取当前img标签的位置
            var l = img.getBoundingClientRect().x;
            var y = img.getBoundingClientRect().y;
            // 2. 通过判断按下的键码值 确定按下的是上下左右  做出不一样的操作
            if (e.keyCode == 37) {
                //左
                l -= 5;
                if (l < 0) l = 0;
            } else if (e.keyCode == 38) {
                // 上
                y -= 5;
                if (y < 0) y = 0;
            }
            else if (e.keyCode == 39) {
                // 右
                var maxl = window.innerWidth - img.offsetWidth;
                l += 5;
                if (l > maxl) l = maxl;
            }
            else if (e.keyCode == 40) {
                // 下
                var maxy = window.innerHeight - img.offsetHeight;
                y += 5;
                if (y > maxy) y = maxy;
            }
            img.style.top = y + "px";
            img.style.left = l + "px";
        }

        // 1. 添加键盘事件 
        document.addEventListener("mousemove",function(e){
            img.style.left = e.clientX - 48 +"px";
            img.style.top = e.clientY - 40 +"px";
        })
        window.addEventListener("keydown", aaa)
        // 1. 设置空格的按下事件
        window.addEventListener("keydown", function (e) {
            // 2. 如果按下的不是空格，就结束这个函数的运行
            if (e.keyCode != 32) return;

            


            
            // 3. 创建一个标签对象 span
            var span = document.createElement("span");
            // 4. 添加class  带有子弹的样式
            span.classList.add("zidan");
            // 5. 将span追加至box标签内
            box.appendChild(span);


            // 7. 计算span的初始位置
            var sl = img.getBoundingClientRect().x + img.offsetWidth / 2 - span.offsetWidth / 2;
            var st = img.getBoundingClientRect().y + img.offsetHeight / 2;

            // 6. 设置span的初始位置
            span.style.left = sl + "px";
            span.style.top = st + "px";

            // 7. 设置延迟 确保在第六步执行完成后 再设置新的span位置
            setTimeout(function () {
                // 设置过渡时间 完成top值更改的动画效果
                span.style.transitionDuration = "0.3s";
                span.style.top = -40 + "px";

            }, 4);

            // 8. 等top的动画执行完成后 删除span标签
            setTimeout(function () {
                box.replaceChild(span);
            }, 310)
        })

    </script>
</body>

</html>